<template>
  <el-card class="list-page">
    <div class="list-h">
      <el-button
        type="primary"
        @click="handleView(null, 1)"
        v-auth="`/projects/template/project--add`"
        >新增项目模板</el-button
      >
      <el-form
        :inline="true"
        class="demo-form-inline"
        :model="formSearch"
        ref="formRef"
        @submit.prevent
      >
        <el-form-item label="模板名称" prop="projectTemplateNameLike">
          <el-input
            clearable
            class="width-custom120"
            v-model="formSearch.projectTemplateNameLike"
          ></el-input>
        </el-form-item>
        <el-form-item label="适用项目类型" prop="projectTmpTypeCode">
          <el-select
            v-model="formSearch.projectTmpTypeCode"
            value-key="dicCode"
            class="width-custom120"
          >
            <el-option
              class="default-option"
              v-for="item in projectTypeList"
              :label="item.dicValue"
              :key="item.dicCode"
              :value="item"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="创建人" prop="createUserNameLike">
          <el-input
            clearable
            class="width-custom120"
            v-model="formSearch.createUserNameLike"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="handleReset">重置</el-button>
          <ReButton
            type="primary"
            debounce
            auto-loading
            @click="handleMainSearch"
            >查询</ReButton
          >
        </el-form-item>
      </el-form>
    </div>
    <el-skeleton style="height: 50vh" :rows="8" :loading="loading" animated>
      <el-table
        :data="tableData"
        stripe
        style="width: 100%"
        :header-cell-style="{
          background: '#F7F9FD',
          color: '#000',
          height: '48px',
          borderTop: '1px soild #E4E8F2'
        }"
      >
        <template #empty>
          <el-empty :image-size="150" description="暂无数据"></el-empty>
        </template>
        <el-table-column type="index" label="序号" width="50px">
          <template v-slot="scope">
            <span>{{
              (formSearch.pageNum - 1) * formSearch.pageSize + scope.$index + 1
            }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="projectTemplateName" label="模板名称">
        </el-table-column>
        <el-table-column prop="projectTmpTypeName" label="适用项目类型">
        </el-table-column>
        <el-table-column prop="createUserName" label="创建人">
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间"> </el-table-column>
        <el-table-column fixed="right" label="操作" width="160">
          <template #default="{ row }">
            <el-button
              type="text"
              @click="handleView(row, 0)"
              v-auth="`/projects/template/project--view`"
              >查看</el-button
            >
            <el-button
              type="text"
              @click="handleView(row, 1)"
              v-auth="`/projects/template/project--edit`"
              >编辑</el-button
            >
            <el-popconfirm
              confirm-button-text="确定"
              cancel-button-text="取消"
              icon="el-icon-info"
              icon-color="red"
              title="确定删除该条记录吗？"
              @confirm="handleDel(row)"
            >
              <template #reference>
                <el-button
                  type="text"
                  class="btns-danger"
                  v-auth="`/projects/template/project--delete`"
                  >删除</el-button
                >
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <re-pagination
        v-if="total > 0"
        :total="total"
        v-model:page="formSearch.pageNum"
        v-model:limit="formSearch.pageSize"
        @pagination="handleSearch"
      />
    </el-skeleton>
  </el-card>
</template>

<script lang="ts">
import { reactive, ref, defineComponent } from "vue";
import ReButton from "/@/components/ReButton/index.vue";
import { useRouter } from "vue-router";
import { projectTemplateList, delTemplateList } from "/@/api/projects";
import RePagination from "/@/components/RePagination/index.vue";
import NotifMessage from "/@/utils/message/notification";

import { postDictList } from "/@/api/home";

export default defineComponent({
  components: { ReButton, RePagination },
  setup() {
    const formRef = ref<HTMLFormElement | null>(null) as any;
    let projectTypeList = ref([]);
    let formSearch = reactive({
      isOriginal: "1", //
      projectTemplateNameLike: "",
      projectTmpTypeCode: "",
      createUserNameLike: "",
      createTimeStrStart: "",
      createTimeStrEnd: "",
      pageNum: 1,
      pageSize: 10
    });
    const router = useRouter();
    let loading = ref<boolean>(false);
    let tableData = ref([]);
    let total = ref<number>(0);

    // 项目类型
    const initProjectTypeList = async () => {
      try {
        const { data } = await postDictList({ dicType: "thd_pro_type" });
        projectTypeList.value = data || [];
      } catch (err) {
        console.log(err);
      }
    };
    initProjectTypeList();

    const getTableData = async () => {
      loading.value = true;
      try {
        let { projectTmpTypeCode } = formSearch;
        let params = {
          ...formSearch,
          projectTmpTypeCode:
            (projectTmpTypeCode && projectTmpTypeCode.dicCode) || ""
        };
        const { code, data } = await projectTemplateList(params);

        if (code === 200) {
          tableData.value = data.list;
          total.value = data.rows;
        }
      } catch (err) {
        console.log(err);
      } finally {
        loading.value = false;
      }
    };

    getTableData();

    const handleReset = (): void => {
      formRef.value.resetFields();
    };

    const handleSearch = () => {
      getTableData();
    };

    const handleMainSearch = done => {
      handleSearch();
      setTimeout(() => {
        done();
      }, 1000);
    };

    const handleView = (item, isEdit) => {
      router.replace({
        path: "/projects/template/project/detail",
        query: {
          id: item && item.id,
          isEdit
        }
      });
    };

    const handleDel = async (item: any) => {
      try {
        const { code, message } = await delTemplateList({ id: item.id });
        if (code === 200) {
          NotifMessage.success(message);
          getTableData();
        } else {
          NotifMessage.error(message);
        }
      } catch (err) {
        console.log(err);
      }
    };

    return {
      formRef,
      formSearch,
      projectTypeList,
      loading,
      total,
      tableData,
      handleReset,
      handleSearch,
      handleMainSearch,
      handleView,
      handleDel
    };
  }
});
</script>

<style lang="scss" scoped></style>
